<template>
	<view class="President">
		<view class="Hader">
			<view class="Lanpe">
				<view class="wods">姓名</view>
				<view class="wods_A"><input type="text" v-model="name" placeholder-class="plactext" placeholder="就诊人姓名" /></view>
			</view>
			<view class="Lanpe">
				<view class="wods">性别</view>
				<view class="D_xenaa"><uni-data-checkbox v-model="gender" :localdata="genderOption" /></view>
			</view>

			<view class="Lanpe">
				<view class="wods">手机号</view>
				<view class="wods_A"><input type="number" v-model="mobile" placeholder-class="plactext" placeholder="手机号（必填）" /></view>
			</view>
			<view class="Lanpe">
				<view class="wods">身份证号</view>
				<view class="wods_A"><input type="text" v-model="id_number" placeholder-class="plactext" placeholder="身份证号" /></view>
			</view>
			<view class="Lanpe">
				<view class="wods">就诊人关系</view>
				<view class="Relationship">
					<picker @change="bindPickerChange" :value="index" :range="array" range-key="name">
						<view class="people">{{ relation ? relation : '请选择就诊人关系' }}</view>
					</picker>
				</view>
			</view>
		</view>
		<!-- 底部提示信息 -->
		<view class="prompt">
			<view class="prompt_A">温馨提示</view>
			<view class="prompt_B">就诊人姓名、证件仅用于本平台审核，不会外传。请输入正确的就诊人姓名和证件号。</view>
		</view>
		<view class="A_bottom">
			<view style="display: flex;">
				<button class="button2" v-if="id" @click="handleDelete" style="width: 300rpx;">删除</button>
				<button type="default" class="button" @click="submit" :style="id ? 'width: 300rpx;' : ''">保存</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			id: 0,
			is_adult: 1,
			name: '',
			gender: '',
			mobile: '',
			id_number: '',
			relation: '',
			isAdultOption: [
				{
					text: '是',
					value: 1
				},
				{
					text: '否',
					value: 0
				}
			],
			genderOption: [
				{
					text: '男',
					value: 1
				},
				{
					text: '女',
					value: 2
				}
			],
			array: [
				{
					name: '父母'
				},
				{
					name: '子女'
				},
				{
					name: '兄弟姐妹'
				},
				{
					name: '本人'
				},
				{
					name: '夫妻'
				},
				{
					name: '其他'
				}
			],
			index: 0,
			item: []
		};
	},
	onLoad(options) {
		if (options.item) {
			this.item = JSON.parse(options.item);
			this.name = this.item.name;
			this.id = this.item.id;
			this.id_number = this.item.id_number;
			this.mobile = this.item.mobile;
			this.gender = this.item.gender;
			if (this.item.relation) {
				this.relation = this.item.relation;
			}
		}
	},
	methods: {
		adend_a() {
			uni.reLaunch({
				url: './patient'
			});
		},
		handleDelete() {
			this.get('/api/Zrecduzp/shanchuzhidingdejiuzhenren', {
				id: this.id,
				user_id: uni.getStorageSync('user_id')
			}).then(res => {
				uni.navigateBack({
					delta: 1
				});
				setTimeout(function() {
					uni.showToast({
						title: '删除成功',
						icon: 'none'
					});
				}, 500);
			});
		},
		bindPickerChange: function(e) {
			console.log(e.detail.value);
			this.relation = this.array[e.detail.value].name;
		},
		//提交表单
		submit() {
			//手机号判断正则
			let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
			//身份证判断正则
			let idCardReg = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;

			//手机号判断
			if (!this.mobile) {
				//判断如果手机号为空，提示用户输入手机号
				uni.showToast({
					title: '请输入手机号',
					icon: 'none'
				});
				return;
			} else if (!reg.test(this.mobile)) {
				//判断手机号格式时候正确
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				});
				return;
			}

			//身份证号判断
			if (!this.id_number) {
				//判断如果身份证为空，提示用户输入身份证号
				uni.showToast({
					title: '请输入身份证号',
					icon: 'none'
				});
				return;
			} else if (!idCardReg.test(this.id_number)) {
				//判断身份证格式时候正确
				uni.showToast({
					title: '请输入正确的身份证号',
					icon: 'none'
				});
				return;
			}
			//关系判断
			if (!this.relation) {
				//判断如果关系为空，提示用户选择关系
				uni.showToast({
					title: '请选择与就诊人的关系',
					icon: 'none'
				});
				return;
			}
			if (this.name && this.id_number) {
				this.form = {
					user_id: uni.getStorageSync('user_id'),
					id: this.id,
					name: this.name,
					mobile: this.mobile,
					id_number: this.id_number,
					gender: this.gender,
					relation: this.relation,
					is_adult: this.is_adult
				};
				this.post('/api/Zrecduzp/jiaozhenxinxiluruhuoqu', this.form).then(res => {
					let tips = this.id == 0 ? '添加成功' : '修改成功';
					uni.showToast({
						title: tips,
						icon: 'none'
					});
					setTimeout(function() {
						uni.navigateBack({
							delta: 1
						});
					}, 1000);
				});
			} else {
				uni.showModal({
					title: '请输入就诊人信息',
					showCancel: false
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.President {
	background-color: #fafafa;
	height: 100%;
	width: 100%;
}

.Hader {
	margin: 45rpx;
}

.Lanpe {
	width: 600rpx;
	height: 120rpx;
	border-bottom: 2rpx solid #e4e4e4;
	line-height: 120rpx;
	margin-left: 20rpx;
	display: flex;
	justify-content: space-between;

	.wods {
		color: #424f5e;
		font-size: 28rpx;
		width: 200rpx;
	}

	.wods_A {
		padding-top: 40rpx;
		font-size: 28rpx;
		color: #424f5e;
		text-align: right;
		// display: flex;
		// justify-content: space-between;
	}
}

/* 底部提示信息 */
.prompt_B {
	color: #c4c4c4;
	font-weight: 900;
	margin-left: 70rpx;
	width: 600rpx;
	font-size: 26rpx;
}

.prompt_A {
	height: 120rpx;
	font-weight: 900;
	line-height: 120rpx;
	margin-left: 70rpx;
	width: 600rpx;
	color: #424f5e;
}

.left_T {
	width: 50rpx;
	height: 50rpx;
	margin-top: 50rpx;
}

/* 底部 */
.agree {
	color: #ab68f7;
}

.button {
	background-color: #5f5af7 !important;
	color: #ffffff !important;
	width: 600rpx;
	border-radius: 10rpx;
	margin-top: 60rpx;
}

.button2 {
	background-color: #8e8da9 !important;
	color: #ffffff !important;
	width: 600rpx;
	border-radius: 10rpx;
	margin-top: 60rpx;
}

.A_bottom {
	width: 100%;
	height: 180rpx;
	margin-bottom: 0;
	background-color: #ffffff;
	bottom: 0;
	position: fixed;
	justify-content: center;
}

/* 选项栏 */

.people {
	margin-left: 130rpx;
	margin-right: 10rpx;
	color: #707984;
}

.Relationship {
	display: flex;
	color: #c4c4c4;
}

.D_xenaa {
	margin-left: 105rpx;
	text-align: right;
	margin-top: 35rpx;
}

.plactext {
	font-size: 28rpx;
	color: #e4e4e4;
}

.D_xena {
	margin-left: 35rpx;
	text-align: right;
	margin-top: 35rpx;
}

.D_xen {
	text-align: right;
	display: flex;
	margin-left: 130rpx;
	margin-top: 35rpx;
}

/* 顶部样式 */
.Top {
	display: flex;
	padding: 20rpx;
}

.Topone {
	width: 280rpx;
	text-align: left;
	font-size: 45rpx;
	font-weight: 900;
	margin-left: 20rpx;
	color: #5f5af7;
}

.Toptwo {
	color: #5f5af7;
	font-size: 36rpx;
	font-weight: 900;
	margin-left: -50rpx;
	margin-top: 40rpx;
}

.plactext {
	color: #707984;
}
</style>
